import { Collapse } from "antd";
import React from "react";
import { PenMainProps } from "@/types";
import {
  AlignBorder,
  AlignFirstPen,
} from "@/components/Configuration/MultipleProps/components/AlignPen.tsx";
import { MultiplePenStyle } from "@/components/Configuration/MultipleProps/components/MultiplePenStyle.tsx";

export function Alignment(props: PenMainProps) {
  const panelStyle: React.CSSProperties = {
    borderRadius: 0,
  };

  return (
    <>
      <Collapse
        style={{ border: "none", borderRadius: 0, borderColor: "#000000" }}
        items={[
          {
            key: "AlignBorder",
            label: "对齐(参照框)",
            children: <AlignBorder {...props} />,
            style: panelStyle,
          },
          {
            key: "AlignFirst",
            label: "对齐(参照第一个选中节点)",
            children: <AlignFirstPen {...props} />,
            style: panelStyle,
          },
          {
            key: "styles",
            label: "样式",
            children: <MultiplePenStyle {...props} type={"styles"} />,
            style: panelStyle,
          },
          {
            key: "text",
            label: "文字",
            children: <MultiplePenStyle {...props} type={"text"} />,
            style: panelStyle,
          },
        ]}
        defaultActiveKey={["AlignBorder", "AlignFirst", "styles", "text"]}
      />
    </>
  );
}
